<template>
  <div class="app-container" ref="appContainer">
    <!-- <div class="header"> -->
    <div>
      <el-tabs v-model="activeName" @tab-click="onClickTab">
        <el-tab-pane label="按日统计" name="first">
          <!-- ------------表格--------------->

          <el-date-picker v-model="inputSearch.searchDate" type="date" placeholder="选择日期" @change="getDayData">
          </el-date-picker>
          <div class="table">
            <el-table v-loading="loading" :data="dailyList" show-summary highlight-current-row style="width: 100%"
              :border="true">
              <el-table-column label="购买时间" align="center" prop="time" width="170px">
              </el-table-column>
              <el-table-column label="用户ID" align="center" prop="userid" width="125px">
              </el-table-column>
              <el-table-column label="头像" width="90px" align="center">
                <template #default="scope">
                  <el-avatar :size="80" :src="scope.row.headimg">
                    <img src="@/assets/image/userlogo.png" />
                  </el-avatar>
                </template>
              </el-table-column>
              <el-table-column label="呢称" align="center" prop="nick_name" width="125px">
              </el-table-column>
              <el-table-column label="支付人民币" align="center" prop="rmb">
              </el-table-column>
              <el-table-column label="购买钻石" align="center" prop="gems">
              </el-table-column>
              <el-table-column label="购买金豆" align="center" prop="coins">
              </el-table-column>
            </el-table>

          </div>

        </el-tab-pane>
        <el-tab-pane label="按周统计" name="second">
          <div style="margin: 20px 10px;text-align:left;">
            <!-- <el-date-picker v-model="week" type="week" format="[Week] ww" placeholder="请选择一个指定周" @change="getWeekData" /> -->
            <!-- <el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" placeholder="请选择一个指定周" @change="getWeekData" /> -->
            <el-date-picker v-model="week" type="week"  placeholder="请选择一个指定周" @change="getWeekData" />
          </div>
          <el-table :data="WeekDataList" border highlight-current-row show-summary style="width: 100%">
            <el-table-column prop="date" align="center" label="购买时间" width="170px" />
            <el-table-column prop="rmb" align="center" label="支付人民币" />
            <el-table-column prop="gems" align="center" label="购买钻石" />
            <el-table-column prop="coins" align="center" label="购买金豆" />
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="按月统计" name="third">
          <div style="margin: 20px 10px;text-align:left;">
            <el-date-picker v-model="month" type="month" placeholder="请选择一个指定月" @change="getMonthData" />
          </div>
          <el-table :data="monthDataList" border highlight-current-row show-summary style="width: 100%">
            <el-table-column prop="date" align="center" label="购买时间" width="170px" />
            <el-table-column prop="rmb" align="center" label="支付人民币" />
            <el-table-column prop="gems" align="center" label="购买钻石" />
            <el-table-column prop="coins" align="center" label="购买金豆" />
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'
import { HttpClient } from '@/utils/HttpClient'
import { nextTick, onMounted, reactive, ref } from 'vue'
const loading = ref(true)
const activeName = ref("first")
const appContainer = ref(null)


const inputSearch = reactive({
  searchId: '',
  searchDate: new Date()
})


let dailyList = reactive([
  {
    "time": "2022-12-11 12:00:00",
    "userid": 1,
    "nick_name": "",
    "rmb": 1,
    "coins": 0,
    "gems": 0,
    "headimg": ""
  }
])

let WeekDataList = reactive([
  {
    "date": "2022-12-11",
    "rmb": 1,
    "gems": 0,
    "coins": 0,
  }
])
let week = ref(DateUtil.getWeekByDate(new Date())) //本周一的日期
let monthDataList = reactive([
  {
    "date": "2022-12-11",
    "rmb": 1,
    "gems": 0,
    "coins": 0,
  }
])
let month = ref(DateUtil.getMonthByDate(new Date())) //本周1号的日期


onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
  getDailyList()
})



const onClickTab = (tab, event) => {
  Logger.log("onClickTab===", tab, event)
  switch (tab.props.name) {
    case 'first':
      getDayData()
      break;
    case 'second':
      getWeekData()
      break;
    case 'third':
      getMonthData()
      break;

    default:
      break;
  }
}

const getDayData = () => {
  Logger.log("getDayData===", inputSearch)
}


const formatDailyList = (users: Array<object>, resultList: Array<object>) => {
  resultList.splice(0)

  for (let i = 0; i < users.length; i++) {
    let user = {
      "userid": users[i]["userid"],
      "headimg": users[i]["headimg"],
      "nick_name": users[i]["nick_name"],
      "time": DateUtil.formatDateStr(new Date(users[i]["pay_time"]).getTime()),
      "rmb": users[i]["rmb"],
      "coins": users[i]["coins"],
      "gems": users[i]["gems"],

    }
    resultList[i] = user
  }
}

const getDailyList = () => {
  loading.value = true;
  HttpClient.game_date_charge_data(inputSearch.searchDate.getTime(), (data: Array<object>) => {
    loading.value = false
    formatDailyList(data, dailyList)
  })
}


const formatWeekList = (dataList: Array<object>, resultList: Array<object>) => {
  resultList.splice(0)

  for (let i = 0; i < dataList.length; i++) {
    let obj = {
      "date": dataList[i]["date"],
      "rmb": dataList[i]["rmb"],
      "coins": dataList[i]["coins"],
      "gems": dataList[i]["gems"],

    }
    resultList[i] = obj
  }
}
const getWeekData = () => {
  // Logger.log("getWeekData==-===", new Date().getDay())
  // Logger.log("getWeekData======", week.value)
  // Logger.log("getWeekData==1==", week.value)
  // Logger.log("getWeekData==2=", week.value.getTime())
  HttpClient.game_week_charge_data(week.value.getTime(), (data: Array<object>) => {
    loading.value = false
    formatWeekList(data, WeekDataList)
  })
}

const getMonthData = () => {
  Logger.log("getMonthData======", month.value)
  HttpClient.game_month_charge_data(month.value.getTime(), (data: Array<object>) => {
    loading.value = false
    formatWeekList(data, monthDataList)
  })
}

</script>
    
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
    